<template>
  <div class="work-container">
    <div class="work-header">
      <h3>我的工作</h3>
    </div>

    <el-tabs v-model="activeTab" class="work-tabs">
      <el-tab-pane label="全部工作" name="all"></el-tab-pane>
      <el-tab-pane label="待处理" name="pending"></el-tab-pane>
      <el-tab-pane label="进行中" name="in-progress"></el-tab-pane>
      <el-tab-pane label="已完成" name="completed"></el-tab-pane>
      
      <template v-if="filteredWork.length === 0">
        <el-empty description="暂无相关工作任务"></el-empty>
      </template>
      
      <el-card v-for="task in filteredWork" :key="task.id" class="work-card" shadow="hover">
        <div class="work-card-header">
          <div class="project-info">
            <h4>项目：{{ task.projectName }}</h4>
            <el-tag type="info" effect="plain" size="small">{{ task.moduleName }}</el-tag>
          </div>
          <el-tag 
            :type="getStatusType(task.status)" 
            effect="plain"
          >
            {{ getStatusText(task.status) }}
          </el-tag>
        </div>
        
        <h5 class="task-title">任务：{{ task.title }}</h5>
        
        <div class="requirement-section">
          <div class="section-title">需求描述</div>
          <p class="task-desc">{{ task.description }}</p>
        </div>
        
        <div class="work-details">
          <div class="detail-row">
            <span class="label">开始日期:</span>
            <span>{{ task.startDate }}</span>
          </div>
          
          <div class="detail-row">
            <span class="label">截止日期:</span>
            <span :class="{'near-deadline': isNearDeadline(task.deadline)}">{{ task.deadline }}</span>
          </div>
          
          <div class="detail-row">
            <span class="label">优先级:</span>
            <el-tag size="small" :type="getPriorityType(task.priority)">
              {{ getPriorityText(task.priority) }}
            </el-tag>
          </div>
          
          <div class="detail-row">
            <span class="label">当前进度:</span>
            <el-progress 
              :percentage="task.progress" 
              :status="task.progress === 100 ? 'success' : ''"
              :color="progressColor"
            ></el-progress>
          </div>
        </div>
        
        <div class="work-actions">
          <el-slider 
            v-model="task.progress" 
            @change="(val) => updateProgress(task, val)" 
            :step="5" 
            show-stops
          ></el-slider>
          
          <div class="status-buttons">
            <el-button 
              size="small" 
              :type="task.status === 'pending' ? 'primary' : ''" 
              @click="updateStatus(task, 'pending')"
              :disabled="task.status === 'pending'"
            >
              待处理
            </el-button>
            <el-button 
              size="small" 
              :type="task.status === 'in-progress' ? 'primary' : ''" 
              @click="updateStatus(task, 'in-progress')"
              :disabled="task.status === 'in-progress'"
            >
              进行中
            </el-button>
            <el-button 
              size="small" 
              :type="task.status === 'completed' ? 'primary' : ''" 
              @click="updateStatus(task, 'completed')"
              :disabled="task.status === 'completed'"
            >
              已完成
            </el-button>
          </div>
        </div>
      </el-card>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 工作状态标签选项
const activeTab = ref('all')

// 工作数据
const myWork = ref([
  {
    id: 1,
    projectId: 1,
    projectName: '生活轨迹系统开发',
    moduleName: '前端开发',
    title: '首页UI设计',
    description: '设计应用的首页界面，包括布局、配色和交互元素。需要保持整体风格一致，采用蓝色为主色调，并且适配不同尺寸的手机屏幕。需要包含用户信息展示、统计卡片和快捷操作按钮等元素。',
    priority: 'high',
    status: 'in-progress',
    startDate: '2024-03-10',
    deadline: '2024-03-25',
    progress: 60
  },
  {
    id: 2,
    projectId: 1,
    projectName: '生活轨迹系统开发',
    moduleName: '前端开发',
    title: '用户注册登录功能',
    description: '实现用户的注册、登录和找回密码功能。需要包含表单验证，密码强度检测，以及登录状态保持功能。同时需要对接后端API，实现数据的存储和验证。',
    priority: 'medium',
    status: 'pending',
    startDate: '2024-03-20',
    deadline: '2024-04-05',
    progress: 0
  },
  {
    id: 3,
    projectId: 2,
    projectName: '数据分析平台',
    moduleName: '数据采集',
    title: '数据源接口对接',
    description: '对接多个数据源API，实现数据的自动采集。需要支持REST和GraphQL接口，并设计适配器模式来处理不同格式的数据源。配置定时任务实现数据的定期更新和同步。',
    priority: 'high',
    status: 'completed',
    startDate: '2024-03-05',
    deadline: '2024-03-15',
    progress: 100
  }
])

// 根据状态过滤工作列表
const filteredWork = computed(() => {
  if (activeTab.value === 'all') return myWork.value
  return myWork.value.filter(task => task.status === activeTab.value)
})

// 获取状态类型对应的 Element UI 类型
const getStatusType = (status) => {
  switch (status) {
    case 'pending': return 'warning'
    case 'in-progress': return 'primary'
    case 'completed': return 'success'
    default: return 'info'
  }
}

// 获取状态文本
const getStatusText = (status) => {
  switch (status) {
    case 'pending': return '待处理'
    case 'in-progress': return '进行中'
    case 'completed': return '已完成'
    default: return '未知'
  }
}

// 判断是否临近截止日期（7天内）
const isNearDeadline = (dateStr) => {
  const today = new Date()
  const deadline = new Date(dateStr)
  const diffTime = deadline - today
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
  return diffDays <= 7 && diffDays >= 0
}

// 获取优先级对应的 Element UI 类型
const getPriorityType = (priority) => {
  switch (priority) {
    case 'high': return 'danger'
    case 'medium': return 'warning'
    case 'low': return 'success'
    default: return 'info'
  }
}

// 获取优先级文本
const getPriorityText = (priority) => {
  switch (priority) {
    case 'high': return '高'
    case 'medium': return '中'
    case 'low': return '低'
    default: return '未设置'
  }
}

// 进度条颜色配置
const progressColor = ({ percentage }) => {
  if (percentage < 30) return '#909399'
  if (percentage < 70) return '#e6a23c'
  return '#67c23a'
}

// 更新工作进度
const updateProgress = (task, value) => {
  task.progress = value
  
  // 如果进度为100%，自动将状态设置为已完成
  if (value === 100 && task.status !== 'completed') {
    task.status = 'completed'
    ElMessage.success('任务已完成！')
  }
  // 如果从0开始有进度，自动设置为进行中
  else if (value > 0 && task.status === 'pending') {
    task.status = 'in-progress'
  }
  
  ElMessage.success('进度已更新')
}

// 更新工作状态
const updateStatus = (task, status) => {
  task.status = status
  
  // 如果状态设置为已完成，自动将进度设置为100%
  if (status === 'completed' && task.progress !== 100) {
    task.progress = 100
  }
  
  ElMessage.success('状态已更新')
}

// 查看项目详情
const viewProjectDetail = (projectId) => {
  // 在实际应用中这里会导航到项目详情页
  ElMessage.info(`查看项目详情：${projectId}`)
}
</script>

<style scoped>
.work-container {
  padding: 20px;
}

.work-header {
  margin-bottom: 20px;
}

.work-header h3 {
  color: #1e5eff;
  font-size: 24px;
  margin: 0;
}

.work-tabs {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}

.work-card {
  margin-bottom: 20px;
  animation: fadeIn 0.5s ease forwards;
  transition: all 0.3s;
}

.work-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.work-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.project-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.project-info h4 {
  margin: 0;
  font-size: 16px;
  color: #1e5eff;
}

.task-title {
  font-size: 18px;
  margin: 0 0 15px 0;
  color: #303133;
}

.requirement-section {
  margin-bottom: 20px;
}

.section-title {
  font-weight: bold;
  margin-bottom: 8px;
  color: #606266;
  font-size: 14px;
}

.task-desc {
  color: #606266;
  line-height: 1.6;
  margin: 0;
  white-space: pre-line;
}

.work-details {
  background-color: #f9fbff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
}

.detail-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.detail-row:last-child {
  margin-bottom: 0;
}

.label {
  color: #909399;
  min-width: 80px;
  margin-right: 10px;
}

.near-deadline {
  color: #f56c6c;
  font-weight: bold;
}

.work-actions {
  margin-top: 20px;
}

.status-buttons {
  display: flex;
  justify-content: center;
  margin-top: 15px;
  gap: 10px;
}

:deep(.el-button--primary) {
  background-color: #1e5eff;
}
</style> 